import React, { memo } from 'react'
import {
  LeftListWrapper,
  ItemWrapper
} from './style'
import {
  getCurrentToplistDetailAction,
  getCurrentIndexAction
} from '../../store/actionCreators'
import { shallowEqual, useDispatch, useSelector } from 'react-redux'
import {
  formatImg
} from '@/utils/format'
export default memo(function LeftList() {
  const dispatch = useDispatch()
  const { toplist ,currentIndex} = useSelector(state => ({
    toplist: state.getIn(['toplist', 'toplist']),
    currentIndex:state.getIn(['toplist','currentIndex'])
  }),shallowEqual)
  const chooseRank = (id,index) => {
    dispatch(getCurrentToplistDetailAction(id))
    dispatch(getCurrentIndexAction(index))
  }
  return (
    <LeftListWrapper>
      {
        toplist.map((item, index) => {
          let header
          if (index === 0 || index === 4) {
            header = <h2 className='title'>{ index===0? '云音乐特色榜' :'全球媒体榜'}</h2>
          }
          return (
            <div key={item.id}>
              {header}
              <ItemWrapper className="item" onClick={e => chooseRank(item.id,index)} isActive={index === currentIndex}>
                <div className="left">
                  <img src={formatImg(item.coverImgUrl, 40)} alt="" />
                </div>
                <div className="right">
                  <div className="name">{item.name }</div>
                  <div className="update">{item.updateFrequency }</div>
                </div>
              </ItemWrapper>
            </div>
          )
        })
      }
    </LeftListWrapper>
  )
})
